<template>
<div class="dialog" :style="`top:${system.clientY - 130}px`">
    <span class="title show">删除后无法恢复，是否继续删除？</span>
    <div class="btnpage">
        <span class="cancel flexC" @click="cancelDelate">取消</span>
        <span class="define flexC" @click="definelDelate">确定</span>
    </div>
</div>
</template>

<script setup lang='ts'>
	import { useSystemStore } from "@/store/modules/system";
    const system = useSystemStore();
    const emit = defineEmits(['getSearch']);
	const cancelDelate = ()=>{
		emit('cancelDelate', true)
	}
    const definelDelate = ()=>{
		emit('definelDelate', true)
	}
</script>
<style lang="scss" scoped>
.dialog{
    position:fixed;
    width:220px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 0 7px rgba(166,182,229,.6);
    padding:10px 20px;
    left:50px;
    top:60px;
    z-index:999;
    font-size:12px;
    .title{
        color:#1b56b6;
        line-height:30px;
        text-align:center;
        white-space: nowrap;
    }
    .btnpage{
        width:100%;
        display:flex;
        justify-content:space-between;
        padding:10px 0;
        .cancel{
            border:solid 1px #afb2c5;
            color:#afb2c5;
            height:28px;
            border-radius:5px;
            width:80px;
            cursor:pointer;
        }
        .define{
            color:#fff;
            height:28px;
            border-radius:5px;
            background: #2379ff;
            width:80px;
            cursor:pointer;
        }
    }
}
@media screen and (max-width: 768px) {
    .dialog{
        width:230px;
    }
}
</style>